<template>
  <div class="toBtoC-tab1" id="pdfDom">
    <div class="tableBox">
      <!--  v-loading="tableLoading" -->
      <div v-for="(item, index) in tableData" :key="index">
        <el-table
          :data="item.data"
          v-loading="tableLoading"
          style="width: 100%"
          class="tableTh28"
          border
          stripe
          :span-method="arraySpanMethod"
          ref="table"
        >
          <el-table-column
            :label="tableData[index].areaName"
            prop="className"
            class-name="first-title"
            width="180"
          ></el-table-column>
          <el-table-column
            label="日期"
            prop="proName"
            class-name="first-title"
            width="80"
          ></el-table-column>
          <el-table-column
            :label="item.acctDay"
            :prop="'indexValue' + index"
            :key="index"
            min-width="80"
            v-for="(item, index) in titleList"
          ></el-table-column>
        </el-table>

        <div>
          <div
            :class="'itcCanvas' + index"
            style="height: 350px; width: 100%; margin-top: 20px"
          ></div>

          <div
            :class="'itdCanvas' + index"
            style="height: 350px; width: 100%"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { relativeTimeThreshold } from "moment";
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "incomeDay-tab2",
  props: ["paramsObj"],
  data() {
    return {
      type: "1",
      tableData: [],
      titleList: [],
      tableLoading: true,
      spanArr: "",
    };
  },
  mounted() {
    console.log(this.paramsObj.time);
  },
  methods: {
    init(obj) {
      var that = this,
        param = {
          areaId: obj.areaId,
          acctMonth: obj.time,
          type: that.type,
          isActual: obj.isActual 
        };
      that.getData(param);
    },
    getData(obj) {
      let that = this;

      that.tableLoading = true;

      $budgetAPI.getIncomeDay(
        {
          areaId: obj.areaId,
          acctMonth: obj.acctMonth.replace("-", ""),
          type: obj.type,
          isActual: obj.isActual 
        },
        (res) => {
          console.log(res);
          res.content.data.map((it) => {
            it.data.map((item) => {
              item.dataList.map((data, i) => {
                item["indexValue" + i] = data.indexValue;
              });
            });
          });
          that.tableData = res.content.data;
          that.titleList = res.content.data[0].data[0].dataList;
          that.spanArr = mergeSpan(res.content.data[0].data, ["className"]);
          that.tableLoading = false;

          that.$nextTick(() => {
            var myChart = [];
            var myChartRate = [];
            var option = [];
            var optionRate = [];
            res.content.data.map((it, i) => {
              myChart[i] = that.$echarts.init(
                document.querySelector(".itcCanvas" + i)
              );

              myChartRate[i] = that.$echarts.init(
                document.querySelector(".itdCanvas" + i)
              );

              // 基本面收入 上月
              var data = [];
              it.data[2].dataList.map((it) => {
                data.push(it.indexValue);
              });
              // 基本面收入 本月
              var data1 = [];
              it.data[3].dataList.map((it) => {
                data1.push(it.indexValue);
              });

              // 较上月同期增长率 上月
              var data2 = [];
              it.data[0].dataList.map((it) => {
                data2.push(it.indexValue);
              });

              // 较上月同期增长率 本月
              var data3 = [];
              it.data[1].dataList.map((it) => {
                data3.push(it.indexValue);
              });

              // 较上月同期增长率 增长率
              var data4 = [];
              it.data[5].dataList.map((it) => {
                data4.push(it.indexValue ? it.indexValue.replace("%", "") : "");
              });

              // 折线图 1
              option[i] = {
                title: {
                  text: "基本面收入日净增趋势",
                  textStyle: {
                    fontSize: 14,
                    color: "#848bac",
                  },
                  left: "80",
                },
                color: ["#7f92d9", "#f3707c"],
                xAxis: {
                  type: "category",
                  data: Array.from(new Array(31), (item, value) => value + 1),
                },
                yAxis: {
                  type: "value",
                },
                tooltip: {
                  trigger: "axis",
                },
                legend: {
                  data: ["上月", "本月"],
                  right: "100",
                },
                series: [
                  {
                    name: "上月",
                    data: data,
                    type: "line",
                    label: {
                      normal: {
                        show: false,
                        position: "top",
                        rotate: 45,
                        distance: 20,
                      },
                    },
                  },
                  {
                    name: "本月",
                    data: data1,
                    type: "line",
                    label: {
                      normal: {
                        show: true,
                        position: "top",
                        rotate: 45,
                        distance: 20,
                      },
                    },
                  },
                ],
              };

              optionRate[i] = {
                title: {
                  text: "较上月同期增长率趋势",
                  textStyle: {
                    fontSize: 14,
                    color: "#848bac",
                  },
                  left: "80",
                },
                color: ["#7f92d9", "#f3707c", "#72d38a"],
                legend: {
                  data: ["上月", "本月", "较上月同期增长率"],
                  right: "80",
                },
                tooltip: {
                  trigger: "axis",
                },
                xAxis: {
                  type: "category",
                  data: Array.from(new Array(31), (item, value) => value + 1),
                },
                yAxis: [
                  {
                    type: "value",
                    name: "(单位:万元)",
                    // min: 0,
                    // max: 10,
                    // interval: 1,
                    axisLabel: {
                      formatter: "{value}",
                    },
                  },
                  {
                    type: "value",
                    name: "(单位:%)",
                    // min: 0,
                    // max: 1000,
                    // interval: 5,
                    axisLabel: {
                      formatter: "{value} %",
                    },
                  },
                ],
                series: [
                  {
                    name: "上月",
                    data: data2,
                    type: "line",
                    label: {
                      normal: {
                        show: false,
                        position: "top",
                      },
                      rotate: "-45",
                    },
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: "rgba(119, 147, 217, .5)",
                            },
                            {
                              offset: 1,
                              color: "#fff",
                            },
                          ],
                          false
                        ),
                      },
                      // color: ['rbga(197, 206, 253, .3)']
                    },
                  },
                  {
                    name: "本月",
                    data: data3,
                    type: "line",
                    label: {
                      normal: {
                        show: true,
                        position: "top",
                      },
                      rotate: "-45",
                    },
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: "rgba(255, 103, 166, .5)",
                            },
                            {
                              offset: 1,
                              color: "#fff",
                            },
                          ],
                          false
                        ),
                      },
                      //  color: ['rbga(231, 200, 220, .3)']
                    },
                  },
                  {
                    name: "较上月同期增长率",
                    data: data4,
                    yAxisIndex: 1,
                    type: "line",
                    label: {
                      normal: {
                        show: true,
                        position: "top",
                      },
                    },
                  },
                ],
              };

              myChart[i].setOption(option[i]);
              myChartRate[i].setOption(optionRate[i]);
              that.tableLoading = false ;
            });
          });
        },
        (err) => {
          console.log(err);
        }
      );
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return this.spanArr && this.spanArr[rowIndex][columnIndex];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>